<template>
  <div 
    class="custom-toast-container"
    :class="{ 'show': visible }"
  >
    <!-- 遮罩层 -->
    <div 
      class="toast-mask"
      v-if="mask"
      @click="onMaskClick"
    ></div>
    
    <!-- 弹窗内容 -->
    <div class="toast-box" :style="toastStyle">
      <!-- 图标 -->
      <div v-if="icon" class="toast-icon">
        <i 
          class="fa" 
          :class="[
            type === 'success' ? 'fa-check-circle' : '',
            type === 'error' ? 'fa-times-circle' : '',
            type === 'warning' ? 'fa-exclamation-circle' : '',
            type === 'loading' ? 'fa-spinner fa-spin' : '',
            icon === 'none' ? '' : icon
          ]"
        ></i>
      </div>
      
      <!-- 文本内容 -->
      <div class="toast-text" v-if="title">{{ title }}</div>
      
      <!-- 详细信息 -->
      <div class="toast-detail" v-if="detail">{{ detail }}</div>
      
      <!-- 按钮区域 -->
      <div class="toast-buttons" v-if="buttons && buttons.length">
        <button 
          v-for="(btn, index) in buttons" 
          :key="index"
          class="toast-btn"
          :class="{ 'primary': btn.primary }"
          @click="() => onButtonClick(btn, index)"
        >
          {{ btn.text }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomToast',
  props: {
    // 是否显示弹窗
    visible: {
      type: Boolean,
      default: false
    },
    // 提示标题
    title: {
      type: String,
      default: ''
    },
    // 详细信息
    detail: {
      type: String,
      default: ''
    },
    // 图标类型或自定义图标class
    icon: {
      type: String,
      default: ''
    },
    // 提示类型：success/error/warning/loading
    type: {
      type: String,
      default: '',
      validator: (value) => {
        return ['', 'success', 'error', 'warning', 'loading'].includes(value)
      }
    },
    // 是否显示遮罩层
    mask: {
      type: Boolean,
      default: false
    },
    // 点击遮罩是否关闭
    maskClosable: {
      type: Boolean,
      default: false
    },
    // 自动关闭时间(ms)，0表示不自动关闭
    duration: {
      type: Number,
      default: 2000
    },
    // 按钮配置
    buttons: {
      type: Array,
      default: () => []
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      timer: null
    }
  },
  computed: {
    // 合并默认样式和自定义样式
    toastStyle() {
      const defaultStyle = {
        minWidth: '120px',
        maxWidth: '80%'
      }
      return { ...defaultStyle, ...this.customStyle }
    }
  },
  watch: {
    visible(val) {
      // 显示时启动自动关闭计时器
      if (val && this.duration > 0) {
        this.clearTimer()
        this.timer = setTimeout(() => {
          this.close()
        }, this.duration)
      } else if (!val) {
        this.clearTimer()
      }
    }
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    
    // 清除计时器
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    },
    
    // 点击遮罩层
    onMaskClick() {
      if (this.maskClosable) {
        this.close()
      }
    },
    
    // 点击按钮
    onButtonClick(btn, index) {
      this.$emit('button-click', btn, index)
      // 如果按钮配置了自动关闭，则点击后关闭
      if (btn.autoClose !== false) {
        this.close()
      }
    }
  },
  beforeUnmount() {
    this.clearTimer()
  }
}
</script>

<style scoped>
.custom-toast-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-toast-container.show {
  opacity: 1;
  pointer-events: auto;
}

.toast-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.toast-box {
  position: relative;
  z-index: 2;
  padding: 16px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.custom-toast-container.show .toast-box {
  transform: scale(1);
}

.toast-icon {
  margin-bottom: 8px;
  font-size: 24px;
}

.toast-icon .fa-check-circle {
  color: #52c41a; /* 成功绿色 */
}

.toast-icon .fa-times-circle {
  color: #f5222d; /* 错误红色 */
}

.toast-icon .fa-exclamation-circle {
  color: #faad14; /* 警告黄色 */
}

.toast-icon .fa-spinner {
  color: #1890ff; /* 加载蓝色 */
}

.toast-text {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.toast-detail {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

.toast-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.toast-btn {
  padding: 6px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toast-btn:hover {
  background-color: #f5f5f5;
}

.toast-btn.primary {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.toast-btn.primary:hover {
  background-color: #40a9ff;
}
</style>
